<template>
  <el-dialog :title="titleName" :visible.sync="dialogVisible" custom-class="custom_dialog" :close-on-click-modal="false"
             :modal-append-to-body="false" width="40%" :before-close="onClose">

    <div class="editContent">
      <el-form ref="menu" :rules="menuRules" :model="menu" label-width="100px" label-position="right">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级菜单" class="form-item" prop="parentId">
              <treeselect v-model="menu.parentId"
                          :options="parentMenu"
                          :normalizer="normalizer"
                          :show-count="true"
                          placeholder="选择上级菜单"/>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="菜单名称" class="form-item" prop="menuName">
              <el-input v-model="menu.menuName" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="15">
            <el-form-item label="菜单类型" class="form-item" prop="menuType">
              <el-radio-group v-model="menu.menuType" clearable>
                <el-radio :label="1">目录</el-radio>
                <el-radio :label="2">菜单</el-radio>
                <el-radio :label="3">按钮</el-radio>
                <el-radio :label="4">数据</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="7">
            <el-form-item label="显示顺序" class="form-item" prop="orderNum">
              <el-input-number v-model="menu.orderNum" :min="1" :max="100" label="显示顺序" clearable></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item v-if="[1,2].includes(menu.menuType)" label="菜单图标" class="form-item" prop="icon">
              <el-input v-model="menu.icon" placeholder="菜单图标">
                <svg-icon v-if="menu.icon" slot="prefix" :icon-class="menu.icon"></svg-icon>
                <i v-else slot="prefix" class="el-icon-search el-input__icon"/>
                <el-button slot="append" icon="el-icon-plus" @click="chooseIcon">选择图标</el-button>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="11">
            <el-form-item label="菜单状态" class="form-item" prop="menuStatus">
              <el-radio-group v-model="menu.menuStatus" clearable>
                <el-radio :label="0">正常</el-radio>
                <el-radio :label="1">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item v-if="menu.menuType !='3'" label="路由地址" class="form-item" prop="path">
              <el-input v-model="menu.path" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item v-if="[3,4].includes(menu.menuType)" label="权限标识" class="form-item" prop="perms">
              <el-input v-model="menu.perms" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div style="text-align: center">
      <el-button type="danger" @click="onClose" icon="el-icon-close">取消</el-button>
      <el-button type="primary" @click="onSubmit('menu')" icon="el-icon-check">提交</el-button>
    </div>

    <!--  选择图标界面  -->
    <icon_choose ref="iconChoose" @closeIconDialog="close_icon_dialog"></icon_choose>
  </el-dialog>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import svgIcons from '../../tool/icon/svg-icons'
import icon_choose from '../../tool/icon/icon_choose'
import api from '@/api/sysMenu'

export default {
  name: 'menu-edit',
  components: {Treeselect, icon_choose},
  data() {
    return {
      svgIcons,
      titleName: '',
      dialogVisible: false,
      id: '',
      menu: {
        parentId: 1,
        icon: '',
        menuType: 1,
        menuStatus: 0
      },
      value: '',
      parentMenu: [],
      menuRules: {
        parentId: [{required: true, message: '请选择上级菜单', trigger: 'blur'}],
        menuName: [{required: true, message: '请输入菜单名称', trigger: 'blur'}],
        menuType: [{required: true, message: '请选择菜单类型', trigger: 'blur'}],
        menuStatus: [{required: true, message: '请选择菜单状态', trigger: 'blur'}],
        orderNum: [{required: true, message: '请输入显示顺序', trigger: 'blur'}],
        path: [{required: true, message: '请输入路由地址', trigger: 'blur'}],
        perms: [{required: true, message: '请输入权限标识', trigger: 'blur'}]
      }
    }
  },
  created() {
  },
  methods: {
    // 打开界面
    open(status, id) {
      // 查询上级菜单
      this.menu.parentId = 1
      this.getParentMenu()
      if (status === 'add') {
        this.titleName = '新增菜单'
      }
      if (status === 'edit') {
        this.titleName = '编辑菜单'
        this.getMenuById(id)
      }
      this.dialogVisible = true

    },
    generateIconCode(symbol) {
      return symbol
    },
    handleClipboard(text, event) {
      // 图标名称
      this.menu.icon = text
    },
    // 选择图标
    chooseIcon() {
      this.$refs.iconChoose.open()
    },
    close_icon_dialog(data) {
      if (data.length === 1) {
        if (data.name !== null && data.name !== undefined) {
          return null
        } else {
          this.menu.icon = data
        }
      } else {
        this.menu.icon = data
      }
    },
    // 提交
    onSubmit(menu) {
      var me = this
      this.$refs[menu].validate((valid) => {
        if (valid) {
          if(this.titleName === '新增菜单'){
            api.insertMenu(me.menu).then(response => {
              if (response.status === 200) {
                me.$message({message: response.msg, type: 'success'})
                me.onClose()
              } else {
                me.$message({message: response.msg, type: 'error'})
              }
            }).catch(() => {
            })
          }else if(this.titleName === '编辑菜单'){
            api.updatetMenu(me.menu).then(response => {
              if (response.status === 200) {
                me.$message({message: response.msg, type: 'success'})
                me.onClose()
              } else {
                me.$message({message: response.msg, type: 'error'})
              }
            }).catch(() => {
            })
          }
        } else {
          return false
        }
      })
    },
    // 关闭/取消
    onClose() {
      this.parentId = ''
      // 清空表单
      this.$refs['menu'].resetFields()
      this.menu = {}
      //清空校验数据
      this.$refs['menu'].clearValidate()
      this.dialogVisible = false
      this.$emit('closeDialog', false)
    },
    // 根据Id查询菜单数据
    getMenuById(id) {
      var me = this
      api.selectMenuById({id: id}).then(response => {
        if (response.status === 200) {
          me.menu = response.data
          me.id = response.data.parentId
        } else {
          me.$message({message: response.msg, type: 'error'})
        }
      }).catch(() => {
      })

    },
    // 查询上级菜单数据
    getParentMenu() {
      var me = this
      api.getMenu(this.menu).then(response => {
        if (response.status === 200) {
          me.parentMenu = response.data
        } else {
          me.$message({message: response.msg, type: 'error'})
        }
      }).catch(() => {
      })
    },

    // 转换菜单数据结构
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.menuName,
        children: node.children
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.icons-container {
  margin: 10px 20px 0;
  overflow: hidden;

  .grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .icon-item {
    margin: 20px;
    height: 85px;
    text-align: center;
    width: 100px;
    float: left;
    font-size: 30px;
    color: #24292e;
    cursor: pointer;
  }

  span {
    display: block;
    font-size: 16px;
    margin-top: 10px;
  }

  .disabled {
    pointer-events: none;
  }
}

.svg-icon {
  height: 2.5em;
}
</style>
